התחליף על בסיס jQuery לתגית Marquee שלא בתקן של W3C חוזר בגרסה שנייה.
לגרסה הקודמת לחצו כאן.
דמו לגרסה 2.0 של הפלאגין | הפלאגין – גרסה 2.0
מה חדש בגרסה 2.0
– תוקנו מספר באגים
– כ-90% מהקוד שוכתב
– ביצועים מעט מהירים יותר (נבדק על פיירפוקס בלינוקס)
– הקוד נכתב כפלאגין לספרייה jQuery
– מאפיינים שלא אמורים להיות נראים אל מי שמשתמש בפלאגין הוגדרו כ-private (לא בדיוק, אלא משהו שמדמה את זה), כך שאי אפשר לשנות בטעות מאפיין שאסור לגעת בו.
– השימוש הפך פשוט יותר
איך משתמשים בפלאגין
קודם כל נאתחל את הפלאגין:
$('ourElement').marquee();
כמובן שבמקום ourElement נכתוב מחרוזת מתאימה שמצביעה על האלמנט שלנו.
Marquee מקבלת כפרמטר אובייקט שיקבע את המאפיינים. במקרה שהפרמטר לא יוגדר, ערכי ברירת המחדל יוצבו.
המאפיינים
direction
אחראי על כיוון התנועה.
ערכים אפשריים: right, left, up, down.
delay
קובע את זמן ההפסקה בין כל תזוזה במילי-שניות.
מקבל מספר חיובי מעל 84.
scrollAmount
אחראי על כמות הפיקסלים שיש לזוז בכל פעם.
מקבל מספר שלם.
behavior
קובע את התנהגות ה-Marquee ואת סגנון התנועה.
ערכים אפשריים: scroll, slide, alternate.
loops
קובע את כמות הסיבובים לביצוע.
ערכים אפשריים: מספר שלם אי-שלילי (שלם שגדול או שווה ל-0).
0 נחשב כאין-סוף סיבובים, ואינו אפקטיבי אם ה-behavior הוגדר כ-slide.
אפשרויות ה-Marquee
Marquee מחזירה לנו אובייקט עם הפונקציות setProperties, start, stop, restart ו-reset.
setProperties
כדי לשנות את המאפיינים של ה-Marquee אחרי שיצרנו אותו, נשתמש בפונקציה setProperties, שמקבלת שני פרמטרים:
props – אובייקט המאפיינים. בדיוק כמו הפרמטר שאפשר לשלוח ל-Marquee באתחול הפלאגין.
toDefault – אופציונלי. מקבל true או false. קובע האם לאפס את המאפיינים לערכי ברירת המחדל לפני שהמאפיינים ששלחנו ב-props חלים על ה-Marquee.
דוגמה לשינוי כיוון התנועה ללמעלה:
$('ourElement').marquee().setProperties({
"direction" : "up"
}, false);
"direction" : "up"
}, false);
start
כדי להתחיל את התנועה, נפעיל את start:
$('ourElement').marquee().start();
stop
כדי לעצור את התנועה, נפעיל את stop:
$('ourElement').marquee().stop();
reset
כדי לעצור את התנועה ולהחזיר את האלמנט למקום שבו התחיל, נפעיל את reset:
$('ourElement').marquee().reset();
restart
כדי להתחיל את התנועה מחדש, נפעיל את restart (זהה להפעלת reset ואחר כך start):
$('ourElement').marquee().restart();
תכונות נוספות
הפונקציות start, stop, restart ו-reset מחזירות את האלמנט שעליו אנחנו מבצעים את ה-Marquee, כלומר, אפשר לעשות משהו כזה:
$('ourElement').marquee().start().css('color', 'red');
הקוד הזה יתחיל את תנועת ה-Marquee על האלמנט ואחר כך יקבע לאלמנט את תכונת ה-CSS שנקראת color עם הערך red.
בפעם הראשונה שנפעיל את Marquee על האלמנט (באמצעות הפונקציה Marquee, כמובן) היא תהיה יכולה לקבל אובייקט של מאפיינים ואז היא תאתחל את הפלאגין.
לאחר מכן אפשר לקרוא לה בלי פרמטרים, והיא פשוט תחזיר את האובייקט עם כל הפונקציות. כלומר, אפשר לעשות משהו כזה:
$('ourElement').marquee({
"direction" : 'down'
}).start();
//some code
$('ourElement').marquee().stop();
"direction" : 'down'
}).start();
//some code
$('ourElement').marquee().stop();
מספר הערות
– הפלאגין בעצם מכניס לאלמנט שקבענו שני אלמנטי div, ואליהם מכניס את התוכן שהיה באלמנט. יש לקחת זאת בחשבון כשבונים את קבצי ה-CSS וכשניגשים לאלמנטים שאמורים להיות בתוך האלמנט שקבענו לו Marquee.
– כפי שצוין בהערה הקודמת, הפלאגין מוסיף שני אלמנטי div לתוך האלמנט. מכאן נובע שאי אפשר להשתמש בפלאגין על אלמנטים כמו img ו-input (אלמנטים ללא תוכן). אם רוצים לעשות זאת, יש להכניס את האלמנט ללא התוכן (כמו img ו-input) לתוך div, ועל הדיב לבצע את ה-Marquee, כי הרי ה-Marquee מזיז את התוכן של האלמנט שקבענו לו, ולא את האלמנט עצמו.
– אפשר לשנות את המאפיינים עם setProperties תוך כדי התנועה ומיד יראו את ההשפעה. אין צורך לבצע stop בשביל זה, אלא אם כן משנים את ה-behavior או את ה-delay. במקרה כזה, נצטרך לבצע stop, לשנות ואז לבצע start.
– האובייקט של הפלאגין נשמר באמצעות הפונקציה data של jQuery תחת השם Marquee. אין לשנות אותו עם הפונקציה data, אחרת עלולות להתקבל תוצאות לא-צפויות. (אפשר להשתמש בפונקציה data על האלמנט בלי שום בעיה, רק לא לשמור ערכים תחת השם Marquee.)
תגובות לכתבה:
נראה מגניב, רק לא ברור למה הדיליי צריך להיות יותר מ 84.
נשמע כמו איזה magic constant משום מקום.
תודה .
דרך אגב , למה הורידו את מרקורי מהתקן ? כל כך הרבה קוד בשביל תגית אחת שיצאה מהתקן ?
@intval
האמת היא שנצמדתי להגבלות שהיו לתג marquee עצמו לפני שהוא הוצא מהתקן.
בדקתי, ולפי מה שמצאתי המינימום היה 85, אז יישמתי את זה גם כאן.
יכול להיות שאתה באמת צודק ובגרסה הבאה (אם תהיה) אני אתן יד חופשית לשים איזה מספר חיובי שרוצים.
@shlomo120
בבקשה.
אין לי מושג למה הוא הוצא מהתקן. אני בטוח שתמצא הסבר מפורט באינטרנט, אני לא בדקתי. :)
כל הכבוד ותודה. :)
:)
תודה רבה.
כשCSS3 ייתמך במלואו, כדאי לעבור לאנימציות CSS?
הקישורים שבורים, יש סיכוי לעדכן?
עידכנתי.
תודה :)
@iiddaannyy הקישור לדמו שבור.